<template>
  <view class="page">
    <Navbar title="我的" :auto-back="false" occupy>
      <view class="navbar" slot="left">卫日亚</view>
    </Navbar>
    <view
      class="f f-ac f-jb info"
      v-if="isLogin"
      @click="handleMenu('/pages/my/userData')"
    >
      <view class="avatar">
        <u-avatar :src="baseUrl + userInfo.avatar" size="120rpx" @click.stop="preView" />
      </view>
      <view class="f-1">
        <u-text
          :text="userInfo.nickName"
          color="#fff"
          size="16"
          bold
          lines="1"
          line-height="30"
        />
        <u-text
          :text="userInfo.userName"
          color="#fff"
          size="14"
          lines="1"
          line-height="30"
        />
      </view>
      <view class="f f-ac">
        <u-icon
          v-if="userInfo.vipType && userInfo.vipType != 4"
          :name="require('../../static/icon-member.png')"
          size="28rpx"
          :label="
            userInfo.vipType == 1 ? '月卡' : userInfo.vipType == 3 ? '年卡' : '季卡'
          "
          label-color="#FFA131"
          label-size="20rpx"
          label-pos="bottom"
          space="6"
        />
        <view style="width: 30rpx" />
        <u-icon name="arrow-right" size="20" color="#fff" />
      </view>
    </view>
    <view
      class="f f-ac f-js pl-20 pr-20 pb-10 mt-10"
      v-if="isLogin && userInfo.memberType != 3"
    >
      <view class="f-1">
        <u-icon
          :name="require('../../static/icon-time.png')"
          size="16rpx"
          :label="unreadInfo.vipTime || '-'"
          label-size="20rpx"
          label-color="#909090"
          space="6"
        />
      </view>
      <view class="f-1">
        <u-icon
          :name="require('../../static/icon-stop.png')"
          size="16rpx"
          :label="unreadInfo.areaName || '-'"
          label-size="20rpx"
          label-color="#909090"
          space="6"
        />
      </view>
    </view>
    <view class="f f-ac f-js pl-20 pr-20" v-if="isLogin && userInfo.memberType != 3">
      <view class="f-1">
        <u-icon
          :name="require('../../static/icon-car1.png')"
          size="16rpx"
          :label="userInfo.memberType == 1 ? '充电/停车' : '停车'"
          label-size="20rpx"
          label-color="#909090"
          space="6"
        />
      </view>
    </view>
    <view v-if="!isLogin" class="f f-ac f-jc mt-40">
      <view class="login-btn" @click="handleLogin">登录</view>
    </view>
    <view
      class="column-box"
      :style="{
        top: isLogin && userInfo.memberType != 3 ? '454rpx' : '420rpx',
      }"
    >
      <view class="column-content f f-ac f-ja">
        <view v-for="i in counts" :key="i.id" @click="handleMenu(i.url)">
          <u-icon
            :name="i.icon"
            size="25"
            :label="i.label"
            label-color="#fff"
            label-size="14"
            label-pos="bottom"
            space="10"
          />
          <u-text
            :text="`${i.id == 1 ? '￥' : ''}${i.value || 0}`"
            align="center"
            color="#fff"
            size="14"
            margin="10px 0 0 0"
          />
        </view>
      </view>
      <view class="column-line"></view>
    </view>
    <view class="top-icon">
      <image
        :src="webSrc('/profile/static/icon-car.png')"
        style="width: 100%; height: 100%; opacity: 0.5"
      />
    </view>
    <view class="body-bottom">
      <view
        v-for="i in menus"
        :key="i.id"
        class="body-item f f-ac f-jb pt-20 pb-20"
        @click="handleMenu(i.url)"
      >
        <u-icon
          :name="i.icon"
          size="17"
          :label="i.label"
          label-color="#fff"
          label-size="14"
          space="16"
        />
        <view class="f f-ac">
          <view v-if="i.value" class="badge">{{ i.value }}</view>
          <u-icon name="arrow-right" v-if="i.arrow" color="#979797" size="15" />
        </view>
      </view>
      <button
        class="service-btn"
        v-if="isLogin"
        open-type="contact"
        @contact="handleContact"
      />
      <button class="logout-btn" v-if="isLogin" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script>
import config from "@/request/baseUrl.js";
import { getUnRead, getUserInfo } from "@/request/bindApi.js";
export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      unreadInfo: {
        chargeTime: "", // 充电到期时间
        depositTime: "", // 停车到期时间
        areaName: "", // 停车场名称
      },
      userInfo: {}, // 用户信息
      counts: [
        {
          id: 1,
          label: "我的余额",
          value: 0,
          icon: require("../../static/icon-price.png"),
          url: "",
        },
        {
          id: 2,
          label: "我的订单",
          value: 0,
          icon: require("../../static/icon-order.png"),
          url: "/pages/my/myOrder",
        },
        {
          id: 3,
          label: "我的消息",
          value: 0,
          icon: require("../../static/icon-chat.png"),
          url: "/pages/my/myMessage",
        },
      ],
      menus: [
        {
          id: 1,
          icon: require("../../static/icon-my-order.png"),
          label: "我的订单",
          value: 0,
          url: "/pages/my/myOrder",
          arrow: true,
        },
        // {
        //   id: 2,
        //   icon: require("../../static/icon-my-chat.png"),
        //   label: "在线客服",
        //   value: 0,
        //   url: "",
        //   arrow: true,
        // },
        {
          id: 3,
          icon: require("../../static/icon-my-sms.png"),
          label: "消息中心",
          value: 0,
          url: "/pages/my/myMessage",
          arrow: true,
        },
        {
          id: 4,
          icon: require("../../static/icon-my-feedback.png"),
          label: "意见反馈",
          value: 0,
          url: "/pages/my/myFeedback",
          arrow: true,
        },
        {
          id: 5,
          icon: require("../../static/icon-my-consumption.png"),
          label: "消费记录",
          value: 0,
          url: "/pages/my/myConsumption",
          arrow: true,
        },
      ],
      isLogin: false, // 是否登录
    };
  },
  onShow() {
    this.isLogin = uni.getStorageSync("TOKEN") ? true : false;
    if (this.isLogin) {
      this.refreshUserInfo();
      this.getUnReadInfo();
    }
  },
  onPullDownRefresh() {
    if (this.isLogin) {
      this.refreshUserInfo();
      this.getUnReadInfo();
    } else {
      uni.stopPullDownRefresh();
    }
  },
  methods: {
    // 刷新用户信息
    refreshUserInfo() {
      getUserInfo()
        .then((res) => {
          if (res.code === 200) {
            uni.setStorageSync("USER_INFO", JSON.stringify(res.data));
            this.userInfo = res.data;
            this.counts[0].value = res.data.wallet || 0;
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // 获取未读消息
    getUnReadInfo() {
      getUnRead().then((res) => {
        if (res.code === 200) {
          this.unreadInfo = res.data;
          this.counts[1].value = res.data.orderNum;
          this.counts[2].value = res.data.messageNum;
          this.menus[0].value = res.data.orderNum;
          this.menus[1].value = res.data.messageNum;
          this.$forceUpdate();
        }
      });
    },
    // 编辑资料
    handleEdit() {
      console.log("调整编辑");
    },
    // 打开客服
    handleContact(e) {
      console.log(e);
    },
    // 预览头像
    preView() {
      uni.previewImage({
        urls: [this.userInfo.image],
      });
    },
    // 登录
    handleLogin() {
      if (this.$getStorage("USER_INFO")) {
        uni.navigateTo({ url: "/pages/bind/againLogin" });
      } else {
        uni.navigateTo({ url: "/pages/bind/login" });
      }
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("TOKEN");
            this.isLogin = false;
            this.userInfo = {};
            this.unreadInfo = {};
            this.counts.forEach((i) => (i.value = 0));
            this.menus.forEach((i) => (i.value = 0));
            uni.showToast({
              title: "已退出",
              icon: "none",
            });
          }
        },
      });
    },
    // 跳转页面
    handleMenu(url) {
      if (url) {
        this.$author(() => {
          uni.navigateTo({ url: url });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  position: relative;
  .navbar {
    color: #24de73;
    font-family: "FZZongYi-M05S";
    font-size: 32rpx;
    letter-spacing: 4rpx;
  }
  .info {
    padding: 20rpx;
    &:active {
      background-color: #142527;
    }
    .avatar {
      border: 4rpx solid #24de73;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
  }
  .login-btn {
    width: 400rpx;
    height: 88rpx;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
    border-radius: 60rpx;
    background-color: #24de73;
    &:active {
      background-color: #21c063;
    }
  }
  .column-box {
    width: 710rpx;
    height: 184rpx;
    position: absolute;
    left: 20rpx;
    right: 20rpx;
    z-index: 10;
    transition: all 0.5s ease-in-out;
    .column-content {
      background-color: rgba(255, 255, 255, 0.3);
      height: 183rpx;
      width: 100%;
      border-radius: 30rpx;
      backdrop-filter: blur(16rpx);
      > view {
        flex: 1;
        &:active {
          opacity: 0.7;
        }
      }
    }
    .column-line {
      height: 48rpx;
      position: absolute;
      bottom: 0;
      left: -4rpx;
      right: -4rpx;
      border-left: 4rpx solid #24de73;
      border-right: 4rpx solid #24de73;
      border-bottom: 4rpx solid #24de73;
      border-bottom-left-radius: 30rpx;
      border-bottom-right-radius: 30rpx;
    }
  }
  .top-icon {
    position: absolute;
    top: 408rpx;
    width: 516rpx;
    height: 316rpx;
    right: 0;
    z-index: 9;
  }
  .body-bottom {
    width: 100%;
    padding: 40rpx;
    top: 684rpx;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #21212a;
    border-radius: 40rpx 40rpx 0 0;
    position: absolute;
    .body-item {
      border-bottom: 1rpx solid rgba(217, 217, 217, 0.3);
      &:active {
        background-color: #23232c;
      }
      .badge {
        display: inline-block;
        padding: 2rpx 24rpx;
        border-radius: 50rpx;
        font-size: 26rpx;
        color: #fff;
        background-color: #24de73;
        margin-right: 20rpx;
      }
    }
    .service-btn {
      height: 88rpx;
      width: 670rpx;
      margin-top: 100rpx;
      background-color: transparent;
      background-image: url("../../static/service.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .logout-btn {
      height: 88rpx;
      width: 670rpx;
      line-height: 88rpx;
      margin-top: 20rpx;
      font-size: 26rpx;
      color: #24de73;
      border-radius: 20rpx;
      display: inline-block;
      border: 1rpx solid rgba(36, 222, 114, 0.3);
      background-color: rgba(38, 223, 115, 0.1);
    }
  }
}
</style>
